<template lang="pug">
  .panel
    .list
      .row(v-for="(item,index) of data" :key="index")
        .tab
          .msg {{item.msg}}
            .ratio(v-if="item.unitRatio") 分配比: {{process(item.ratio)}}
          .main
            .item
              .value {{item.value}}
              .desc {{item.currdesc}}
            .item
              .value {{item.total}}
              .desc {{item.totaldesc}}
</template>
<script>
let data = [
  {
    msg: '单位数量 (个)',
    currdesc: '当月新增',
    totaldesc: '总量',
    value: 124,
    total: 615
  },
  {
    msg: '应用系统数量 (个)',
    currdesc: '当月新增',
    totaldesc: '总量',
    value: 470,
    total: 1230
  },
  {
    msg: '资源申请单数量 (个)',
    currdesc: '审核已通过',
    totaldesc: '总量',
    value: 1007,
    total: 3690
  },
  {
    msg: 'CPU（核）',
    currdesc: '已分配',
    totaldesc: '总量',
    ratio: 0.8,
    value: 4000,
    total: 5000
  },
  {
    msg: '内存（GB）',
    currdesc: '已分配',
    totaldesc: '总量',
    ratio: 0.75,
    value: 15000,
    total: 20000
  },
  {
    msg: '存储 (TB)',
    currdesc: '已分配',
    totaldesc: '总量',
    ratio: 0.8,
    value: 400,
    total: 500
  }
]
export default {
  data () {
    return {
      data
    }
  },
  methods: {
    process (value) {
      return value * 100 + '%'
    }
  }
}
</script>

<style lang="stylus" scoped>
.panel
  margin-bottom 15px
  .list
    display flex
    margin-left: -11px;
    margin-right: -11px;
    .row
      flex 1
      padding-left: 11px;
      padding-right: 11px;
      .tab
        height 116px
        background-color: #09153d;
        box-shadow: 0px 1px 2px 0px rgba(9, 14, 33, 0.75);
        &:last-child
          margin-right 0
        .msg
          height 49px
          line-height @height
          padding 0 23px 0 13px
          font-size 14px
          color #025bbf
          .ratio
            float right
            color #fa0808
        .main
          display flex
          .item
            position relative
            width 133px
            flex 0 0 133px
            padding-left 26px
            &:last-child
              flex 1
              padding-left 40px
              &:after
                position absolute
                left 0
                top 0
                content ""
                width 1px
                height 50px
                background-color #263a7c

            .value
              font-family: Arial;
              font-size 30px
              font-weight bold
              color #f3efff
              margin-bottom 13px
            .desc
              font-size 12px
              color #4db3fe

</style>
